<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折线图</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.css" integrity="sha512-SUJFImtiT87gVCOXl3aGC00zfDl6ggYAw5+oheJvRJ8KBXZrr/TMISSdVJ5bBarbQDRC2pR5Kto3xTR0kpZInA==" crossorigin="anonymous" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js" integrity="sha512-QEiC894KVkN9Tsoi6+mKf8HaCLJvyA6QIRzY5KrfINXYuP9NxdIkRQhGq3BZi0J4I7V5SidGM3XUQ5wFiMDuWg==" crossorigin="anonymous"></script>
<canvas id="canvas" width="300" height="100"></canvas>
<script>
    var ctx = document.getElementById('canvas').getContext('2d'); /*得到canvas的2d对象*/
    var myChart = new Chart(ctx, {
        type: 'line', /*图表类型*/
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], /*x轴的值*/
            datasets: [{
                label: 'line', /*最上面的图标名称，点击该图标可以隐藏或显示折线图*/
                fill: false, /*是否填充折线图，设置为true时将把折线图中线以下的空间进行填充*/
                data: [12, 19, 3, 5, 2, 3], /*折线图的数据，y轴将根据该数据自动绘制*/
                backgroundColor: 'rgb(153,102,255)', /*图线的背景颜色，颜色格式可以为rgb格式或者十六进制格式*/
                borderColor: 'rgb(75,192,192)', /*图线的边框颜色，颜色格式可以为rgb格式或者十六进制格式*/
                borderWidth: 5, /*每一条线的宽度*/
                pointHoverBorderWidth: 25, //鼠标悬浮时点的边框宽度
                //borderDash: [5,10], //破折号的长度和间距
                borderCapStyle: 'butt', //线帽样式
                borderJoinStyle: 'bevel', //线连接风格
                lineTension: 0, //贝塞尔曲线张力。设置为 0 绘制直线。
                pointBackgroundColor: [
                    '#FFC000', '#92D050', '#00B050', '#00B0F0', '#7030A0', '#FFB27D'
                ], /*悬浮在数据点上时显示的颜色*/
            }],
        }
    });
</script>
</body>
</html>